<template>
  <div class="body">
    <div class="header">创客动态</div>

    <div class="center">
      <div class="main">
        <div class="left">
          <div class="peixun">
            <span>赋能培训</span>
          </div>
          <!-- 循环展示赋能培训数据 -->
          <div class="peixun-box" v-for="(training, index) in trainings" :key="index">
            <div class="peixun-item">
              <p><strong>培训课程：</strong>{{ training.trainingName }}</p> <!-- 显示培训课程名称 -->
              <p><strong>时间：</strong>{{ training.time }}</p> <!-- 显示时间 -->
              <p><strong>讲师：</strong>{{ training.instructor || '未知' }}</p> <!-- 显示讲师 -->
              <p><strong>地点：</strong>{{ training.location || '未知' }}</p> <!-- 显示地点 -->
              <p><strong>培训内容：</strong>{{ training.trainingContent || '暂无描述' }}</p> <!-- 显示培训内容 -->
            </div>
          </div>
        </div>
        <div class="dynamics">
          <div class="content">
            <!-- 循环遍历活动数据 -->
            <div class="text" v-for="activity in activities" :key="activity.activityId">
              <h3>{{ activity.name }}</h3>
              <p>{{ activity.nameDetail }}</p>
              <!-- 检查是否有图片列表，并循环展示图片 -->
              <div v-if="activity.activityPictureMappingList && activity.activityPictureMappingList.length > 0"
                class="image-container">
                <img v-for="(picture, index) in activity.activityPictureMappingList" :key="index"
                  :src="picture.pictureUrl" alt="动态图片" class="dynamic-image" />
              </div>
            </div>
          </div>
        </div>



        <!-- <div class="dynamics">
          <div class="content">
            <div class="text" v-for="activity in activities" :key="activity.activityId">
              <h3>{{ activity.name }}</h3>
              <p>{{ activity.nameDetail }}</p>
              <img :src="(activity.activityPictureMappingList && activity.activityPictureMappingList.length > 0)
                ? activity.activityPictureMappingList[0].url
                : placeholderImage" alt="动态图片" class="dynamic-image" />
            </div>
          </div>
        </div> -->
        <div class="right">
          <div class="redian">
            <span>创客热点</span>
          </div>
          <ul class="hotspot-list">
            <li v-for="(hotspot, index) in hotActivities" :key="hotspot.activityId">
              {{ index + 1 }}. {{ hotspot.name || '未知热点' }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listTraining } from "@/api/trainings/training";
import { listActivity, getHotActivities } from "@/api/activities/activity";

export default {
  name: "dynamics",
  data() {
    return {
      activityList: [], // 接口返回的创客动态数据
      trainings: [], // 用来存储赋能培训数据
      activities: [], // 用来存储创客动态数据
      hotActivities: [], // 用来存储创客热点数据
      placeholderImage: require("@/assets/images/login-background.jpg"), // 占位图路径
      queryParams: {
        pageNum: 1,
        pageSize: 100, // 假设最多获取 100 条数据
      },
    };
  },
  computed: {
    // 保留已有的 computed 属性
    hotspotList() {
      return this.activityList
        .filter((item) => item.top !== null && item.top !== undefined) // 筛选 top 不为空的记录
        .sort((a, b) => a.top - b.top); // 按 top 字段升序排序
    },
  },
  created() {
    this.fetchTrainings(); // 页面加载时调用方法获取数据
    this.fetchActivities(); // 加载创客动态数据
    this.fetchActivityData(); // 加载完整创客动态列表
    this.fetchHotActivities(); // 加载创客热点数据
  },
  methods: {
    // 获取赋能培训列表数据
    fetchTrainings() {
      listTraining({})
        .then((response) => {
          console.log(response);
          if (response.code === 200) {
            this.trainings = response.rows.sort((a, b) => {
              const timeA = new Date(a.time).getTime();
              const timeB = new Date(b.time).getTime();
              return timeB - timeA; // 时间降序排列
            });
          } else {
            console.error("获取赋能培训列表失败", response.msg);
          }
        })
        .catch((error) => {
          console.error("获取赋能培训列表失败", error);
        });
    },
    // 获取动态列表数据
    fetchActivities() {
      listActivity({ limit: 10 })
        .then((response) => {
          console.log(response);
          if (response.code === 200) {
            this.activities = response.rows.sort((a, b) => {
              const timeA = new Date(a.createTime).getTime();
              const timeB = new Date(b.createTime).getTime();
              return timeB - timeA; // 最新时间靠前
            });
          } else {
            console.error("获取动态列表失败:", response.code);
            this.activities = [];
          }
        })
        .catch((error) => {
          console.error("获取动态列表失败:", error);
          this.activities = [];
        });
    },
    // 获取创客动态数据
    fetchActivityData() {
      listActivity(this.queryParams)
        .then((response) => {
          console.log(response);
          this.activityList = response.rows || [];
        })
        .catch((error) => {
          console.error("获取创客动态数据失败：", error);
        });
    },
    // 获取创客热点数据
    fetchHotActivities() {
      getHotActivities()
        .then((response) => {
          console.log(response);
          if (response.code === 200) {
            this.hotActivities = response.data || [];
          } else {
            console.error("获取创客热点失败：", response.code);
          }
        })
        .catch((error) => {
          console.error("获取创客热点失败：", response.code);
        });
    },
  },
};
</script>

<style scoped>
.body {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

.header {
  /* background-color: rgba(184, 184, 184, 0.5); */
  background-color: rgb(255, 255, 255, 0.5);
  font-size: 250%;
  padding-top: 2%;
}

.center {
  width: 100%;
  height: 90%;
  display: flex;
  background-color: rgba(255, 255, 255, 0.5);
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}

.main {
  width: 90%;
  height: 88%;
  display: flex;
  justify-content: space-between;
}

.left {
  width: 20%;
  height: 100%;

  overflow-y: scroll;
  /* 增加滚动条 */
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid black;
  /* 增加黑边框 */
}

.peixun {
  text-align: center;
  font-size: 18px;
  margin-bottom: 10px;
}

.peixun-box {
  padding: 12px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 12px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  border: 2px solid black;
  /* 增加黑边框 */
}

.peixun-item p {
  text-align: left;
  margin: 5px 0;
  font-size: 14px;

}

.dynamics {
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.right {
  width: 20%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid black;
  /* 增加黑边框 */
}

.content {
  height: 98%;
  width: 97%;
  background-color: rgba(255, 255, 255, 0.5);
  overflow: scroll;
}

.text {
  width: 90%;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin: 10px 0;
  padding: 15px;
  text-align: left;
    /* 整体文字向左对齐 */
}

.text h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align:center;
}

.text p {
  font-size: 14px;
  margin-bottom: 10px;
  text-align: left;
    /* 单独设置每段文字向左对齐 */
    text-indent: 2em;
    /* 首行空两格 */
}

.dynamic-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 5px;
}

.redian {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.hotspot-list {
  text-align: left;
  list-style-type: none;
  padding: 12px;
}

.hotspot-list li {
  font-size: 14px;
  line-height: 1.8;
}
.image-container {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  flex-wrap: wrap;
  /* 支持多行换行 */
  gap: 10px;
  /* 图片之间间距 */
  margin-top: 10px;
}

.dynamic-image {
  width: 200px;
  height: 150px;
  object-fit: cover;
  /* 图片按比例缩放裁剪 */
  border-radius: 8px;
}
</style>
